<template>
  <div class="editor">
    <div class="cus-editor" style="position: relative;margin: 0 auto;">
      <span class="el-icon-picture"
            style="position: absolute; font-size: 20px;top:5px;left: 698px;color: rgb(153,153,153)"
            @click="imgSelectVisible = !imgSelectVisible"></span>
      <div ref="editor" id="editor" style="text-align: left;"></div>
    </div>
    <!--图床-->
    <el-dialog title="图床"
               :visible.sync="imgSelectVisible" width="75%">

      <gallery :multiple="false" :visible="imgSelectVisible" v-bind:imageData.sync="imageData">

      </gallery>

      <span slot="footer" class="dialog-footer">
        <el-button @click="imgSelectVisible = false">取 消</el-button>
        <el-button type="primary" @click="onImgSelected">选中图片</el-button>
      </span>
    </el-dialog>
  </div>


</template>

<script>
  import {MobileEditorMenus} from "../../utils/editorConfig";
  import Gallery from '../../views/layout/components/Gallery'
  import Editor from 'wangeditor'

  export default {
    props: {
      initContent: {
        default: '',
        type: String,
        required: true
      }
    },
    components: {
      Gallery
    },
    name: "index",
    data() {
      return {
        imageData: {},
        editor: undefined,
        // editorContent: '',
        imgSelectVisible: false
      }
    },
    methods: {
      onImgSelected() {
        if (!this.imageData) {
          this.$message.info("请选择一张图片")
          return
        } else {
          this.imgSelectVisible = false
          this.editor.cmd.do("insertHtml", '<img src="' + this.imageData.url + '" style="max-width:100%;"/>')
          // this.imageData = {}
        }
      },
      initEditor() {
        this.editor.customConfig.menus = MobileEditorMenus
        this.editor.customConfig.onchange = (html) => {
          this.$emit("change", html);
        }
        this.editor.customConfig.debug = true
        this.editor.customConfig.zIndex = 100
      }
    },
    mounted() {
      this.editor = new Editor("#editor")
      this.initEditor()
      this.editor.create()
      this.editor.txt.html(this.initContent || '请输入内容')
    }
  }
</script>

<style scoped>

</style>
